<template>
    <!-- 目录管理 -->
    <div class='container'>
        <div class="dashboard-container">
            <div class="app-container">
                <el-card shadow="never">
                    <!-- 上半部分 -->
                    <div class="filter-container">
                        <el-row type="flex" justify="end">
                            <el-col>
                                <el-form :inline="true" :model="reqParameters" ref="reqParameters">
                                    <el-form-item label="目录名称">
                                        <el-input @keyup.enter="handleFilter"
                                            v-model="reqParameters.directoryName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态">
                                        <el-select placeholder="请选择" v-model="reqParameters.state">
                                            <el-option :key="item.value" :label="item.label" :value="item.value"
                                                v-for="item in status"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button @click="onReset" size="small">清除</el-button>
                                        <el-button @click="onSearch" size="small" type="primary">搜索</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col :span="4">
                                <el-row type="flex" justify="end">
                                    <el-button @click="$router.back()" icon="el-icon-back" type="text"
                                        v-if="subjectID ? true : false">返回学科</el-button>

                                    <el-button class="btnstyle" @click="showDialog = true" icon="el-icon-edit" size="small"
                                        type="success">新增目录</el-button>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>

                    <!-- 数量提示条 -->
                    <el-alert :title="alertText" type="info" show-icon class="alert" :closable="false">
                    </el-alert>

                    <!-- 下半部分 -->
                    <!-- 数据 -->
                    <div class="information">
                        <el-table :data="directorytable" stripe style="width: 100%">
                            <el-table-column align="center" label="序号" type="index" width="60"></el-table-column>
                            <el-table-column align="center" label="所属学科" prop="subjectName" width="130"></el-table-column>
                            <el-table-column align="center" label="目录名称" prop="directoryName" width="130"></el-table-column>
                            <el-table-column align="center" label="创建者" prop="username" width="130"></el-table-column>
                            <el-table-column align="center" label="创建日期" prop="addDate">
                                <template v-slot="{ row }">{{ row.addDate | parseTimeByString }}</template>
                            </el-table-column>
                            <el-table-column align="center" label="面试题数量" prop="totals" width="100"></el-table-column>
                            <el-table-column align="center" label="状态" prop="state" width="130">
                                <template v-slot="{ row }">
                                    <!-- {{ row.state | formatType }} -->
                                    <span>{{ row.state === 1 ? "已启用" : "已禁用" }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="操作" prop="address">
                                <template v-slot="{ row }">
                                    <el-button @click="onswitch(row)" type="text">
                                        {{
                                            row.state == 1 ? "禁用" : "启用"
                                        }}
                                    </el-button>
                                    <el-button :disabled="row.state ? true : false" @click="editBtn(row)"
                                        type="text">修改</el-button>
                                    <el-button :disabled="row.state ? true : false" @click="delBtn(row)"
                                        type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- 分页 -->
                    <div class="pagination">
                        <el-row type="flex" justify="end" align="middle" style="height: 60px">
                            <!-- 分页器 -->
                            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page.sync="reqParameters.page" :page-sizes="[5, 10, 20, 50]"
                                :page-size="reqParameters.pagesize" layout=" prev, pager, next,sizes, jumper"
                                :total="total" />
                        </el-row>
                    </div>

                    <AddDirectorys :id="id" :show-dialog.sync="showDialog" :node="node" @updateForm="list"
                        ref="addDirectorysRef"></AddDirectorys>
                </el-card>
            </div>
        </div>

    </div>
</template>

<script>
import AddDirectorys from '../components/directorys-add.vue'
import { status } from '@/api/hmmm/constants.js'
import { list, changeState, remove, detail } from '@/api/hmmm/directorys'

export default {
    data() {
        return {
            alertText: '',
            node: {},
            status: status,
            reqParameters: {
                // 当前页数
                page: 1,
                // 页尺寸
                pagesize: 10
                // state: null,
                // directoryName: '',
                // subjectID: ''
            },
            subjectID: this.$route.query.id,
            subjectName: this.$route.query.name,
            directorytable: [],
            total: 0,
            // 新增目录弹框是否显示
            showDialog: false,
            // 点击修改需要的id
            id: '',
            subjectDetail: {}
        }
    },
    components: {
        AddDirectorys
    },
    mounted() {
        this.list()
    },
    methods: {
        // 数据渲染
        async list() {
            this.listLoading = true
            let res
            if (this.subjectID) {
                res = await list({ ...this.reqParameters, subjectID: this.subjectID, directoryName: this.directoryName })
            } else {
                res = await list(this.reqParameters)
            }
            // console.log(res)
            const { counts, items } = res.data
            this.total = counts
            this.directorytable = items
            // console.log(this.directorytable);
            this.alertText = `共 ${this.total} 条记录`
            this.listLoading = false
        },
        // 搜索
        async onSearch() {
            const res = await list({
                ...this.reqParameters,
                // subjectID: this.subjectID,
            });
            this.directorytable = res.data.items;
            this.total = res.data.counts;
        },
        // 清除
        onReset() {
            this.reqParameters = {
                // 当前页数
                page: 1,
                // 页尺寸
                pagesize: 10,
                state: null,
                directoryName: '',
            },
                this.list({ ...this.reqParameters });
        },
        //修改按钮
        async editBtn(node) {
            this.node = node
            await this.$refs.addDirectorysRef.detail(node)
            this.showDialog = true
        },
        handleSizeChange(val) {
            this.reqParameters.pagesize = val;
            this.reqParameters.page = 1;
            this.list();
        },
        handleCurrentChange(page) {
            this.reqParameters.page = page;
            this.list();
        },
        // 状态
        async onswitch(row) {
            // console.log(row.state)
            await changeState({ id: row.id, state: row.state === 1 ? 0 : 1 })
            this.list()
            // this.directoryForm = {}
            if (row.state === 1) {
                this.$message.success('状态禁用成功！')
            } else {
                this.$message.success('状态启用成功！')
            }
        },
        //   删除
        async delBtn(id) {
            try {
                await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    type: 'warning'
                })
                const data = await remove(id)
                // console.log(data)
                this.$message.success('删除成功')
                await this.list()
                if (this.directorytable.length === 0) {
                    this.reqParameters.page -= 1
                    this.list({ ...this.reqParameters })


                }
            } catch (error) {
                console.log('取消删除')
            }
        },

    }
}

</script>
<style scoped lang="scss">
.box-card {
    margin: 20px 20px;

    .el-alert {
        margin-bottom: 10px;
    }

    .el-col:nth-child(2) {
        display: flex;
        justify-content: end;
    }

    .el-pagination {
        margin: 20px;
        display: flex;
        justify-content: end;
    }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.pagination {
    margin-top: 10px;
}

.filter-container {
    padding-bottom: 0px !important;
}

.information {
    margin-top: 10px;
}

.alert {
    margin-top: 10px;
}
</style>
